<template>
<PageWrapper title="">
    <vxe-form :data="formConditionData.data" title-colon collapse-status @submit="load">
    <vxe-form-item title="统计维度" field="status" :folding="false">
        <vxe-radio-group v-model="dim" @change="handleDimChange">
            <vxe-radio-button label="1" content="仓库/库区"/>
            <vxe-radio-button label="2" content="货物"/>
        </vxe-radio-group>
    </vxe-form-item>

    <vxe-form-item title="仓库/库区" field="wid" span="6" :folding="false">
        <template #default="{ data }">
        <a-tree-select
        v-model:value="data.wid"
        show-search
        style="width: 100%"
        :allow-clear="true"
        tree-default-expand-all
        :tree-data="warehouseList"
        :field-names="{
            value: 'ID',
            label: 'name',
            children: 'areaList',
        }"
        tree-node-filter-prop="name"
        placeholder="请选择"
        />
    </template>
    </vxe-form-item>

    <vxe-form-item title="货物" field="isGift" :folding="false" v-if="dim === '2'">
        <template #default="{ data }">
        <!-- <vxe-select
v-model="data.goodsId"
        :options="goodsList"
        :option-props="{label: 'name', value: 'ID'}"
        placeholder="请选择" clearable/> -->

        <a-select
            v-model:value="data.goodsId"
            show-search
            placeholder="请选择"
            style="width: 200px"
            :options="goodsList"
            :field-names="{ label: 'name', value: 'ID', }"
            :filter-option="((input: string, option: any) => option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0)"
            :allow-clear="true"
            />
        </template>
    </vxe-form-item>

    <vxe-form-item align="center">
    <template #default>
        <vxe-button type="submit" status="default" icon="vxe-icon-search" @click="load" title="点击查询">查询</vxe-button>
        <a-popconfirm title="确定重置查询条件吗？" @confirm="reset">
            <vxe-button status="default" icon="vxe-icon-repeat">重置</vxe-button>
        </a-popconfirm>
    </template>
    </vxe-form-item>
    </vxe-form>
    
    <XGrid
    ref="xGrid"
    v-if="dim === '1'"
    :stripe="false"
    :is-checkbox="false"
    :show-overflow="false"
    :mergeFields="['warehouseName', 'warehouseAreaName', 'cate.name']"
    :footer-method="footerMethod"
    :height="height"
    :columns="columnsOfWarehouse"
    :query-params="formConditionData.data"
    :query-api-post-interceptor="handleInterceptor"
    :query-api="getReportByWarehouse"
    />
    
    <XGrid
    ref="xGrid"
    v-if="dim === '2'"
    :stripe="false"
    :is-checkbox="false"
    :show-overflow="false"
    :mergeFields="['cate.name', 'code', 'name']"
    :footer-method="footerMethod"
    :height="height"
    :columns="columnsOfGoods"
    :query-params="formConditionData.data"
    :query-api="getReportByGoods"
    />
</PageWrapper>
</template>
<script lang="ts" name="InventoryReport" setup>
import { reactive, ref, } from 'vue';
import XEUtils from 'xe-utils';
import { columnsOfGoods, columnsOfWarehouse } from './data';
import { getListData as getGoodsListData } from '/@/api/wms/goods';
import { getReportByGoods, getReportByWarehouse } from "/@/api/wms/report";
import { getListData as getWarehouseListData } from "/@/api/wms/warehouse";
import { PageWrapper } from '/@/components/Page';
import { XGrid } from '/@/components/XGrid';

const xGrid = ref()  
const height = window.innerHeight - 150
const dim = ref('2')
const formConditionData = reactive({data: {
    wid: null,
    goodsId: null,
}})

const load = () => {
    xGrid.value.reload()
}

const goodsList = ref([])
getGoodsListData().then(dd => goodsList.value = dd as any)
const warehouseList = ref([])
getWarehouseListData().then(dd => warehouseList.value = dd as any)

const reset = () => {
    Object.assign(formConditionData, {data: {}});
    xGrid.value.reload(true)
}


const footerMethod = ({columns, data,}) => {
return [
    columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
            return '合计'
        }
        if (['sumQty'].includes(column.field)) {
            let sum = data.reduce((pre, cur,)=>{
                return pre + cur.sumQty
            }, 0)
            return XEUtils.commafy(XEUtils.toNumber(sum), { digits: 1, });
        }
        if (['amount'].includes(column.field)) {
            let sum = data.reduce((pre, cur,)=>{
                return pre + cur.amount
            }, 0)
            return XEUtils.commafy(XEUtils.toNumber(sum), { digits: 2, });
        }
        return null
    }),
    ]
}

const handleDimChange = ({label}) => {
    if (label === '1') {
        formConditionData.data.goodsId = null
    }
}

const handleInterceptor = (dd:any) => {
    let {result} = dd
    result.forEach((item, i) => item.ID = (i+1))
    return dd
}

</script>
  
<style scoped>
</style>
  